<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>地图</title>
</head>
<body>

<script src="../node_modules/d3/build/d3.js"></script>
<script>
  let width = 800, height = 600;
  let svg = d3.select('body').append('svg').attr('width', width).attr('height', height);
  let proj = d3.geoMercator().center([107, 31]).scale(550).translate([width / 2, height / 2]);
  let path = d3.geoPath(proj);
  let colors = d3.schemeCategory20c;
  d3.json('./china.json', function (err, data) {
    if (err) console.log(err);
    // console.log(data)
    // 画图
    svg.selectAll('path').data(data.features).enter().append('path')
      .attr('stroke', '#000').attr('stroke-width', 1)
      .attr('fill', function (d, i) {
        if (i > 20) return colors[i % 20];
        return colors[i];
      })
      .attr('d', function (d, i) {
        return path(d);
      })
      .on('mouseover', function (d, i) {
        d3.select(this).style('fill', 'yellow')
      })
      .on('mouseout', function (d, i) {
        if (i > 20) d3.select(this).style('fill', colors[i % 20])
        d3.select(this).style('fill', colors[i])
      });

  })
</script>
</body>
</html>